<template>
	<div id="attentionWriterAll">
		<div id="top">{{title}}</div>
		<div id="context">
			<attentionWriterBox v-for="(t,i) in attenInfo" :key="i" :info="title == '关注'?t.attentionID:t.fansID"></attentionWriterBox>
		</div>
		<div v-if="showMore">
			<div id="change" @click="more" v-if="!isMore">加载更多 ></div>
			<div id="change" @click="more" v-else>收起</div>
		</div>
	</div>
</template>

<script>
	import attentionWriterBox from './attentionWriterBox.vue'
	export default {
		data() {
			return {
				attenInfo: [],
				temp: [],
				isMore: false,
				url:'',
				showMore: false
			}
		},
		props: ['title'],
		mounted() {
			if(this.$props.title == "关注"){
				this.url = '/showAttention'
			}else{
				this.url = '/showFans'
			}
			this.$axios({
				url: this.ip + this.url,
				method: 'post',
				data: {
					userID: this.$storage.get('user').id
				}
			}).then(res => {
				console.log(res.data)
				// 若关注人数大于三
				// 只显示三个，并显示加载更多按钮
				// 否则，全部显示，隐藏加载更多按钮
				if (res.data.info.length > 3) {
					this.showMore = true
					for (let i = 0; i <= 2; i++) {
						this.attenInfo.push(res.data.info[i])
					}
					this.temp = res.data.info
				} else {
					this.showMore = false
					this.attenInfo = res.data.info
					this.temp = res.data.info
				}
			})
		},
		methods: {
			// 点击取消加载更多
			more() {
				this.isMore = !this.isMore
				let a = this.$deepClone(this.attenInfo)
				this.attenInfo = this.$deepClone(this.temp)
				this.temp = this.$deepClone(a)
			}
		},
		components: {
			attentionWriterBox
		}
	}
</script>

<style>
	#attentionWriterAll #top {
		padding: 8px 16px;
		font-size: 16px;
		color: #999999;
		border-bottom: 1px solid #EEEEEE;
	}

	#attentionWriterAll #context {
		display: flex;
		flex-direction: column;
	}

	#attentionWriterAll #change {
		padding: 8px 0;
		text-align: center;
		font-size: 16px;
		color: #999999;
		border-bottom: 1px solid #EEEEEE;
		cursor: pointer;
	}
</style>
